<template>
  <div>
    <el-header style="height: 50px;">
      <Personinfo style="height: 50px;"></Personinfo>
    </el-header>
    <el-divider style="margin: 0;padding: 0"></el-divider>
    <el-row style="background-color: #f4f2f5">
      <el-image style="margin-left: 200px;width: 200px;height: 150px;" :src="logo_url"></el-image>
    </el-row>
    <el-row style="width: 100%;background-color: #f0ffff;background-size:100% 100%;">
      <el-card class="box-card" style="width: 800px;">
        <div slot="header" class="clearfix">
          <span>企业注册</span>
        </div>
        <el-form ref="form" :model="form" style="margin: 20px 0px;width: 800px" label-width="140px" size="mini">
          <el-form-item label="账号">
            <el-input v-model="form.loginName"  placeholder="请输入手机号/邮箱/用户名" suffix-icon="el-icon-user" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" placeholder="请输入用户密码" suffix-icon="el-icon-lock" type="password" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col style="width: 80px;">密码强度：</el-col>
              <el-col style="width: 80%" >
                <el-steps :space="200" :active="3" finish-status="success">
                  <el-step title="弱"></el-step>
                  <el-step title="中"></el-step>
                  <el-step title="强"></el-step>
                </el-steps>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="form.password2" placeholder="请输入用户密码" suffix-icon="el-icon-lock" type="password" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="form.userName"  placeholder="联系人姓名"  style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="联系手机">
            <el-input v-model="form.mobilePhone"  placeholder="联系手机"  style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input v-model="form.enterpriseName"  placeholder="输入公司名称" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="form.address"  placeholder="输入公司地址" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="form.validateCode" placeholder="验证码" type="password" style="width: 330px;height: 30px;margin: -8px 1px;"></el-input>
            <el-image style="width: 60px;height: 30px;margin: -10px 3px;" @click="refreshCode"
                      :src="captchaUrl"
            ></el-image>看不清？<el-link :underline="false" @click="refreshCode">换一张</el-link>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col style="width: 100px;">
                <el-checkbox-group v-model="form.read">
                  <el-checkbox label="我已阅读" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-col>
              <el-col style="width: 200px;margin-left: 0px;">
                <el-link :underline="false">《注册协议》,并自愿遵守该协议</el-link>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="submit" style="width: 300px;background-color: #dcdfe6" @click="register">立即注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import Header from "./components/Header";
import Personinfo from "../Personinfo";
import {CheckUserName, PersonalRegister,EnterpriseRegister} from "../../api/user";
import instance from "../../api";

export default {
  name: "EnterpriseReg",
  components: {footerx,Header,Personinfo},
  data (){
    return {
      activeNames: ['1','2','3'],
      form:{name:"",password:'',password2:'',mobilePhone:'',enterpriseName:'',loginName:'',validateCode:'',read:true},
      logo_url:'./static/logo2.png',
      activeName:'first',
      captchaUrl:this.getCaptchaUrl()
    }
  },
  methods:{
    handleOpen(key, keyPath){
      console.log(key, keyPath);
    },
    getCaptchaUrl(){
      return instance.defaults.baseURL+'/captcha/captchaImage?type=math&s='+new Date().getTime() ;
    },
    refreshCode(){
      this.captchaUrl = this.getCaptchaUrl();
    },
    handleClose(key, keyPath){
      console.log(key, keyPath);
    },
    handleChange(val) {
      console.log(val);
    },
    register(){
      CheckUserName.r({userName:this.form.loginName}).then(d=>{
        if(d.data.code === 0){
          EnterpriseRegister.r(this.form).then(d=>{
            this.$router.push("login");
          });
        }else{
          this.$message(d.data.msg);
        }
    })
    }
  }
}
</script>

<style scoped>
.myCcontainer{
  background: azure;
  width: 1200px;
}
/deep/ .el-divider--horizontal{
  margin: 0;
  padding: 0;
}

</style>